<template>
  <div class="list-box" ref="wrapper">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list :immediate-check="false" v-model:loading="loading" v-model:error="error" :finished="curFinished" finished-text="没有更多了"
        @load="onLoad">
        <slot></slot>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

const props = defineProps({
  finished: {
    type: Boolean,
    default: false,
  },
  error: {
    type: Boolean,
    default: false,
  },
})

const emits = defineEmits(['reFresh', 'loadData'])
const error = ref(false)
const refreshing = ref(false)
const loading = ref(false)
const curFinished = ref(props.finished)
const curError = ref(props.error)
watch(props, (newVal, oldVal) => {
  curFinished.value = newVal.finished
  curError.value = newVal.error
  if (newVal.error || newVal.finished) {
    loading.value = false
    refreshing.value = false
  }
})

const onLoad = () => {
  loading.value = true
  if (refreshing.value) {
    refreshing.value = false;
  }

  emits('loadData')

  let timer = setTimeout(() => {
    loading.value = false
    clearTimeout(timer)
  }, 1000)
}

const onRefresh = () => {
  emits('reFresh')

  let timer = setTimeout(() => {
    refreshing.value = false
    clearTimeout(timer)
  }, 1000)
}

</script>

<style lang="scss" scoped>
.list-box {
  min-height: 100%;

  .van-pull-refresh {
    min-height: 40px;
  }

}
</style>
